<!doctype html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <title>Nebulos</title>

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
    <script type="text/javascript" language="javascript" src="../src/nebulos.js"></script>
    <script type="text/javascript" language="javascript" src="../src/canvasport-v0.1.js"></script>
    <!--[if IE]><script type="text/javascript" src="../src/min/excanvas.min.js"></script><![endif]-->
  </head>

  <body onload="init()">

    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    <h3>Nebulos Test Page</h3>

    <div id="mydiv1" style="width: 300px; height: 300px;"></div>
    <div id="mydiv2" style="width: 300px; height: 300px;"></div>
    <div id="mydiv3" style="width: 300px; height: 300px;"></div>

    <script type="text/javascript">

      function init() {
        var vis = new metaaps.nebulos(document.getElementById('mydiv1'));
        vis.setFontFamily("'Tangerine', serif");
        vis.draw();

        // pass it a text string
        var myText = "some very long text, but keep as a string as nebulos will brek it down into words";
        var vis2 = new metaaps.nebulos(document.getElementById('mydiv2'));
        vis2.draw(myText);

        var weight = 2;
        var myTextList = [
            {text: "word" + weight, weight: weight+=5},
            {text: "word" + weight, weight: weight+=5},
            {text: "word" + weight, weight: weight+=5},
            {text: "word" + weight, weight: weight+=5},
            {text: "word" + weight, weight: weight+=5},
            {text: "word" + weight, weight: weight+=5},
            {text: "word" + weight, weight: weight+=5},
        ];
        var vis3 = new metaaps.nebulos(document.getElementById('mydiv3'));
        vis3.draw(myTextList);
       }

    </script>
  </body>
</html>
